// CardComponent.tsx
import React from 'react';
import { Card, Tag, Typography } from 'antd';
import { useCallback } from 'react';
import { Link } from 'react-router-dom';

function useCard() {
    const handleDetailsClick = useCallback((url: string) => {
        // 使用浏览器的导航功能跳转到指定 URL
        window.location.href = url;
    }, []);

    return { handleDetailsClick };
}

const { Title } = Typography;

interface CardComponentProps {
    title: string;
    tag1: string;
    tag2: string;
    detailsUrl: string;
}

const CardComponent: React.FC<CardComponentProps> = ({ title, tag1, tag2, detailsUrl }) => {
    const { handleDetailsClick } = useCard();

    return (
        <Card
            hoverable={true}
            bordered={true}
            style={{ width: 300 }}
            bodyStyle={{ padding: '16px' }}
        >
            <Title level={3} style={{ margin: '0 0 16px 0' }}>{title}</Title>
            <div style={{ marginBottom: 16 }}>
                <Tag color="blue" style={{ color: 'black', marginRight: 8 }}>
                    {tag1}
                </Tag>
                <Tag color="green" style={{ color: 'black' }}>
                    {tag2}
                </Tag>
            </div>
            <Link to='/Test_item_Person_1'>查看详情</Link>
        </Card>
    );
};

export default CardComponent;